<template>
	<el-container>
	<el-header>
		<div class="left-panel">
			<span style="font-weight: 600;font-size: 18px">{{(folderName!=''?'《'+folderName+'》':'')}}</span>
		</div>
		<div class="right-panel">
			<el-button @click="goBack" :disabled="this.historyIndex==0" type="primary" icon="el-icon-arrow-left">上一页</el-button>

			<el-button @click="goNext" :disabled="this.historyIndex==this.historyRecord.length" type="primary">上一页<el-icon class="el-icon--right"><el-icon-arrow-right/></el-icon></el-button>
		</div>
	</el-header>
	<el-container @contextmenu.prevent="openMenu('folderContextmenu',$event)">
		<el-card shadow="never" style="width:100%;overflow: auto">
			<el-alert v-if="this.folderId==''" title="请选择目录查看文件" type="warning" style="margin-bottom:20px;"></el-alert>
			<el-col v-if="childFolderList.length==0&&fileList.length==0">
				<el-empty description="目录下没有文件" :image-size="100"></el-empty>
			</el-col>
			<el-row :gutter="15">
				<el-col style="background-color: #f9f9f9;padding: 10px;margin: 5px" :xl="3" :lg="3" :md="4" :sm="6" :xs="24" v-for="item in childFolderList" :key="item.fileId"
						@dblclick="openFolder(item)"
						@contextmenu.prevent.stop="openMenu('folderOtherContextmenu',$event,item)">
					<div style="text-align: center;">
						<el-icon style="font-size: 40px;">
							<el-icon-folder-opened/>
						</el-icon>
					</div>
					<div style="text-align: center;font-size: 16px;font-weight: 600;text-overflow: ellipsis;width: 100%;overflow: hidden;white-space: nowrap;">
						{{ item.fileName }}
					</div>
				</el-col>
				<el-col style="background-color: #f9f9f9;padding: 10px;margin: 5px" :xl="3" :lg="3" :md="4" :sm="6" :xs="24" v-for="item in fileList" :key="item.fileId"
						@contextmenu.prevent.stop="openMenu('fileContextmenu',$event,item)" @dblclick="preview(item)">
					<div style="text-align: center;">
						<el-icon style="font-size: 40px;" :title="(item.fileSize/(1024*1024)).toFixed(2)+`MB`">
							<component :is="getFileTypeIcon(item.extName)"/>
						</el-icon>
					</div>
					<div style="text-align: center;font-size: 16px;font-weight: 600;text-overflow: ellipsis;width: 100%;overflow: hidden;white-space: nowrap;">
						<span :title="item.remark">{{ item.fileName }}</span>
					</div>
				</el-col>
			</el-row>
		</el-card>
	</el-container>
	</el-container>
	<sc-contextmenu ref="fileContextmenu" @command="handleCommand">
		<sc-contextmenu-item command="copy" title="复制" icon="el-icon-document-copy"></sc-contextmenu-item>
		<sc-contextmenu-item command="shear" title="剪切" icon="el-icon-scissor"></sc-contextmenu-item>
		<sc-contextmenu-item command="delete" title="删除" icon="el-icon-delete"></sc-contextmenu-item>
		<sc-contextmenu-item command="rename" title="重命名" icon="el-icon-finished"></sc-contextmenu-item>
		<sc-contextmenu-item command="version" title="历史版本" icon="el-icon-expand"></sc-contextmenu-item>
		<sc-contextmenu-item command="down" title="下载" icon="el-icon-download"></sc-contextmenu-item>
		<sc-contextmenu-item command="preview" title="预览" icon="el-icon-view"></sc-contextmenu-item>
	</sc-contextmenu>

	<sc-contextmenu ref="folderOtherContextmenu" @command="handleCommand">
		<sc-contextmenu-item command="openFolder" title="打开" icon="el-icon-plus"></sc-contextmenu-item>
		<sc-contextmenu-item command="copyFolder" title="复制" icon="el-icon-document-copy"></sc-contextmenu-item>
		<sc-contextmenu-item command="shearFolder" title="剪切" icon="el-icon-scissor"></sc-contextmenu-item>
		<sc-contextmenu-item command="deleteFolder" title="删除" icon="el-icon-folder-checked"></sc-contextmenu-item>
		<sc-contextmenu-item command="renameFolder" title="重命名" icon="el-icon-finished"></sc-contextmenu-item>
		<sc-contextmenu-item command="share" title="共享" icon="sc-icon-delegate"></sc-contextmenu-item>
	</sc-contextmenu>

	<sc-contextmenu ref="folderContextmenu" @command="handleCommand">
		<sc-contextmenu-item command="createFile" title="新建文件" icon="el-icon-plus"></sc-contextmenu-item>
		<sc-contextmenu-item command="createFolder" title="新建文件夹" icon="el-icon-edit"></sc-contextmenu-item>
		<sc-contextmenu-item command="paste" title="粘贴" icon="el-icon-folder-checked" :disabled="this.optId==''"></sc-contextmenu-item>
	</sc-contextmenu>
	<share-dialog v-if="dialog.shareSave" ref="shareFileDialog" @closed="dialog.shareSave=false"></share-dialog>
	<file-dialog v-if="dialog.fileSave" :folder-id="this.folderId" ref="fileDialog" @success="handleSaveSuccess" @closed="dialog.fileSave=false"></file-dialog>
	<attach-version v-if="dialog.versionSave" :attach-id="this.fileItem.attachId" ref="fileVersionDialog" @closed="dialog.versionSave=false"></attach-version>
</template>

<script>
import personalFilUtils from '@/views/file/personal/personFileUtils'
import fileDialog from "./fileDialog";
import shareDialog from "./shareDialog"
import iconSelect from "@/config/iconSelect"
import scContextmenu from '@/components/scContextmenu'
import scContextmenuItem from '@/components/scContextmenu/item'
import AttachVersion from "@/views/module/attachVersion";
import attachUtils from "@/utils/attachUtils";
export default {
	name: 'Personal File',
	mixins: [personalFilUtils, attachUtils],
	components: {
		fileDialog,
		AttachVersion,
		scContextmenu,
		scContextmenuItem,
		shareDialog
	},
	data() {
		return {
			dialog: {
				save: false,
				shareSave:false,
				versionSave:false
			},
			fileType: "",
			optType: "",
			optId: "",
			childFolderList: [],
			fileList: [],
			fileItem: {},
			folderId: '',
			folderName: '',
			historyRecord:[],
			historyIndex:0,
			rules: {}
		}
	},
	mounted() {
	},
	methods: {
		setHistory(folderId,folderName)
		{
			var sourceFolderId = this.folderId;
			var sourceFolderName = this.folderName;
			this.historyIndex = this.historyIndex+ 1;
			this.folderId = folderId
			this.folderName = folderName;
			this.historyRecord.push({sourceFolderId: sourceFolderId, sourceFolderName: sourceFolderName, folderId: this.folderId, folderName: this.folderName});
			this.getPersonalFileList(folderId);
		},
		goBack(){
			if(this.historyIndex>0)
			{
				this.historyIndex=this.historyIndex-1;
				var item = this.historyRecord[this.historyIndex];
				this.folderId =item.sourceFolderId;
				this.folderName = item.sourceFolderName;
				this.getPersonalFileList(item.sourceFolderId);
			}
		},
		goNext(){
			if(this.historyIndex<this.historyRecord.length)
			{
				var item = this.historyRecord[this.historyIndex];
				this.historyIndex=this.historyIndex+1;
				this.folderId =item.folderId;
				this.folderName = item.folderName;
				this.getPersonalFileList(item.folderId);
			}
		},
		async getPersonalFileList(folderId)
		{
			var res = await this.$API.file.personalFile.getPersonalFileList.get({folderId: folderId});
			if (res.code == 200) {
				this.childFolderList = res.data.folderList;
				this.fileList = res.data.fileList;
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		addFileFolder() {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.fileFolderDialog.open()
			})
		},
		openMenu(menu, e, item) {
			this.$refs.folderContextmenu.closeMenu();
			this.$refs.folderOtherContextmenu.closeMenu();
			this.$refs.fileContextmenu.closeMenu();
			this.fileItem = item;
			this.$refs[menu].openMenu(e);
		},
		getFileTypeIcon(extName) {
			var iconName = "sc-icon-" + extName.substr(1, extName.length);
			if (iconSelect.icons[1].icons.indexOf(iconName) !== -1) {
				return iconName;
			} else {
				return 'sc-icon-unknown-file';
			}
		},
		handleSaveSuccess() {
			this.$emit('changefoldersuccess');
			this.getPersonalFileList(this.folderId);
		},
		openFolder(item) {
			var sourceFolderId = this.folderId;
			var sourceFolderName = this.folderName;
			this.historyIndex=this.historyIndex+1;
			this.folderId = item.fileId;
			this.folderName = item.fileName;
			this.fileItem = item;
			this.historyRecord.push({sourceFolderId:sourceFolderId,sourceFolderName:sourceFolderName,folderId:this.folderId,folderName:this.folderName});
			this.getPersonalFileList(item.fileId);
		},
		async handleCommand(command) {
			if (command == "createFile") {
				this.dialog.fileSave = true
				this.$nextTick(() => {
					this.$refs.fileDialog.open()
				})
			} else if (command == "createFolder") {
				this.$prompt('请输文件夹新名称', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputErrorMessage: '新文件夹名称不能为空'
				}).then(({value}) => {
					if (!value) {
						this.$alert('新文件夹名称不能为空', "提示", {type: 'error'})
					} else {
						this.createFolder(this.folderId, value)
					}
				}).catch(() => {
				})
			} else if (command == "edit") {
				this.openFileOnLine(this.fileItem.extName, this.fileItem.fileId, 4);
			} else if (command == "read") {
				this.openFileOnLine(this.fileItem.extName, this.fileItem.fileId, 1);
			} else if (command == "version") {
				this.dialog.versionSave = true
				this.$nextTick(() => {
					this.$refs.fileVersionDialog.open()
				})
			} else if (command == "shear") {
				this.fileType = "file";
				this.optType = "1";
				this.optId = this.fileItem.fileId;
				this.$message.success("剪切成功,请选择粘贴位置");
			} else if (command == "shearFolder") {
				this.fileType = "folder";
				this.optType = "1";
				this.optId = this.fileItem.fileId;
				this.$message.success("剪切成功,请选择粘贴位置");
			} else if (command == "copy") {
				this.fileType = "file";
				this.optType = "2";
				this.optId = this.fileItem.fileId;
				this.$message.success("拷贝成功,请选择粘贴位置");
			} else if (command == "copyFolder") {
				this.fileType = "folder";
				this.optType = "2";
				this.optId = this.fileItem.fileId;
				this.$message.success("拷贝成功,请选择粘贴位置");
			}else if(command=="share"){
				this.dialog.shareSave = true
				this.$nextTick(() => {
					this.$refs.shareFileDialog.open().setData(this.fileItem);
				})
			}else if (command == "paste") {
				this.paste(this.fileType, this.optType, this.optId, this.folderId);
			} else if (command == "delete") {
				this.$confirm(`确定删除选中的《` + this.fileItem.fileName + `》文件吗？`, '提示', {
					type: 'warning'
				}).then(async () => {
					const loading = this.$loading();
					this.delete(this.fileItem);
					loading.close();
				}).catch(() => {
				})
			} else if (command == "deleteFolder") {
				this.$confirm(`确定删除选中的《` + this.fileItem.fileName + `》目录吗？如果删除项中含有子集将会被一并删除`, '提示', {
					type: 'warning'
				}).then(async () => {
					const loading = this.$loading();
					this.deleteFolder(this.fileItem);
					loading.close();
				}).catch(() => {
				})
			} else if (command == "openFolder") {
				this.folderId = this.fileItem.fileId;
				this.folderName = this.fileItem.fileName;
				this.getPersonalFileList(this.fileItem.fileId);
			} else if (command == "preview") {
				this.preview(this.fileItem)
			} else if (command == "down") {
				this.down(this.fileItem)
			} else if (command == "renameFolder") {
				this.$prompt('请输文件夹新名称', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputErrorMessage: '新文件夹名称不能为空'
				}).then(({value}) => {
					if (!value) {
						this.$alert('新文件夹名称不能为空', "提示", {type: 'error'})
					} else {
						this.renameFolder(this.fileItem, value)
					}
				}).catch(() => {
				})
			} else if (command == "rename") {
				this.$prompt('请输文件新名称', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputErrorMessage: '新文件名称不能为空'
				}).then(({value}) => {
					if (!value) {
						this.$alert('新文件名称不能为空', "提示", {type: 'error'})
					} else {
						this.rename(this.fileItem, value)
					}
				}).catch(() => {
				})
			}
		},
	}
}
</script>
